import React, { Component } from 'react'
import { _getLocation, _setLocation } from '../../utils/index'
import ContextIndex from '../context'
import UserInfo from '../useDescorate/userInfo'
import Commentinput from '../CommentInput/Commentinput'
import CommentList from '../CommentList/CommentList'
import './CommentApp.scss'
export default class CommentApp extends Component {
	state = {
		comments: _getLocation('comments') ?? [],
		currentTime: new Date() + '',
	}
	componentDidMount() {
		setInterval(() => {
			this.setState({
				currentTime: new Date() + '',
			})
		}, 1000)
	}
	// 删除评论
	handelDel = (comment) => {
		const delNum = this.state.comments.indexOf(comment)
		this.state.comments.splice(delNum, 1)
		_setLocation('comments', this.state.comments)
		this.setState({
			comment: this.state.comments,
		})
	}
	// 定义方法接收数据
	handleSubmitComment = (comment) => {
		this.state.comments.push(comment)
		_setLocation('comments', this.state.comments) // 存储在本地
		this.setState({
			comments: this.state.comments,
		})
	}
	render() {
		return (
			<>
				<div
					className="wrapper"
					ref={(wrapper) => {
						this.wrapper = wrapper
					}}
				>
					{/* 当前时间 */}
					<div>{this.state.currentTime}</div>
					<Commentinput
						onSubmit={this.handleSubmitComment}
					></Commentinput>
					<CommentList
						handelDel={this.handelDel}
						comments={this.state.comments}
					>
						<div> 传递给CommentList 组件的children</div>
					</CommentList>
				</div>
				<hr />
				{/* 装饰器展示个人信息 */}
				<UserInfo sex="男" />
				{/* context */}
				<ContextIndex></ContextIndex>
			</>
		)
	}
}
